<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

	<h2>Remote Div</h2>
	<p class="text">
	    A simple remote div that load content with AJAX call to struts2 action.
	</p>
    <strong>Div with a valid URL:</strong>
    <s:url var="ajax" value="/echo.action"><s:param name="echo" value="%{'We love jQuery'}"/></s:url>
    <sj:div
            id="resultnormal"
            href="%{ajax}"
            indicator="indicator"
            onBeforeTopics="beforeDiv"
            onCompleteTopics="completeDiv"
            onErrorTopics="errorDiv"
            cssClass="result ui-widget-content ui-corner-all"
    >
        <img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
    </sj:div>
    
    <br/><br/>
    
    <strong>Div with an invalid URL:</strong>
    <sj:div
            id="resulterror"
            href="not_exist.html"
            indicator="indicator"
            onCompleteTopics="completeDiv"
            onErrorTopics="errorDiv"
            cssClass="result ui-widget-content ui-corner-all"
    >
        <img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
    </sj:div>

<h4>Source Code</h4>
<sj:tabbedpanel id="localtabs" cssClass="list">
    <sj:tab id="tab1" target="jsp" label="JSP Code"/>
    <sj:tab id="tab2" target="java" label="JavaScript"/>
    <div id="jsp">
	  <pre>
            <code class="html">
&lt;strong&gt;Div with a valid URL:&lt;/strong&gt;
&lt;s:url var=&quot;ajax&quot; value=&quot;/echo.action&quot;&gt;&lt;s:param name=&quot;echo&quot; value=&quot;%{'We love jQuery'}&quot;/&gt;&lt;/s:url&gt;
&lt;sj:div
    id=&quot;resultnormal&quot;
    href=&quot;%{ajax}&quot;
    indicator=&quot;indicator&quot;
    onBeforeTopics=&quot;beforeDiv&quot;
    onCompleteTopics=&quot;completeDiv&quot;
    onErrorTopics=&quot;errorDiv&quot;
    cssClass=&quot;result ui-widget-content ui-corner-all&quot;
&gt;
    &lt;img id=&quot;indicator&quot; src=&quot;images/indicator.gif&quot; alt=&quot;Loading...&quot; style=&quot;display:none&quot;/&gt;
&lt;/sj:div&gt;

&lt;br/&gt;&lt;br/&gt;

&lt;strong&gt;Div with an invalid URL:&lt;/strong&gt;
&lt;sj:div
    id=&quot;resulterror&quot;
    href=&quot;not_exist.html&quot;
    indicator=&quot;indicator&quot;
    onCompleteTopics=&quot;completeDiv&quot;
    onErrorTopics=&quot;errorDiv&quot;
    cssClass=&quot;result ui-widget-content ui-corner-all&quot;
&gt;
    &lt;img id=&quot;indicator&quot; src=&quot;images/indicator.gif&quot; alt=&quot;Loading...&quot; style=&quot;display:none&quot;/&gt;
&lt;/sj:div&gt;
            </code>
	  </pre>
    </div>
    <div id="java">
	  <pre>
            <code class="javascript">
$.subscribe('beforeDiv', function(event,data) {
    alert('Before request ');
});
$.subscribe('completeDiv', function(event,data) {
    if(event.originalEvent.status == &quot;success&quot;)
        $('#resultnormal').append('&lt;br/&gt;&lt;br/&gt;&lt;strong&gt;Completed request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.&lt;/strong&gt;&lt;br/&gt;Status: '+event.originalEvent.request.status);
});
$.subscribe('errorDiv', function(event,data) {
    $('#resulterror').html('&lt;br/&gt;&lt;br/&gt;&lt;strong&gt;Error request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.&lt;/strong&gt;&lt;br/&gt;Status: '+event.originalEvent.request.status);
});
            </code>
	  </pre>
    </div>

</sj:tabbedpanel>
